<template>
    <div>

        <el-dialog :title="isAdd ? '添加管理员' : '编辑管理员'" :visible.sync="isShow" center :before-close="cancel">
            <el-form :model="userForm" :rules="rules" ref="userRef">
                <el-form-item label="所属角色" prop="roleid" :label-width="formLabelWidth">
                    <el-select v-model="userForm.roleid" placeholder="请选择">
                        <el-option v-for="item in $store.getters['role/getRoleList']" :label="item.rolename"
                            :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名称" :label-width="formLabelWidth" prop="username">
                    <el-input v-model="userForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="userForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="userForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import { userAdd, userInfo, userEdit } from '../../request/api';
import { mapGetters, mapActions } from 'vuex'
export default {
    props: ['isAdd', 'isShow'],
    data() {
        return {
            userForm: {
                roleid: '',//角色编号number
                username: '',//管理员名称string
                password: '',//密码string
                status: 1,//状态  1正常2禁用number
            },
            formLabelWidth: '120px',
            rules: {
                username: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
                roleid: [
                    { required: true, message: '请选择所属角色', trigger: 'change' }
                ],

            }
        }
    },
    methods: {
        // 点击取消 关闭弹窗
        cancel() {
            this.$emit('cancel', false);
            this.reset();
            this.resetForm();
        },
        // 清空
        reset() {
            this.userForm = {
                roleid: '',//角色编号number
                username: '',//管理员名称string
                password: '',//密码string
                status: 1,//状态  1正常2禁用number
            }
        },
        // 清空规则
        // resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
        resetForm() {
            this.$refs.userRef.resetFields()
        },
        // 点击确定  关闭弹窗
        add() {
            // console.log(this.userForm);
            // 获取表单内容
            this.$refs.userRef.validate(value => {
                if (value) {
                    if (this.isAdd) {
                        // 添加
                        userAdd(this.userForm).then(res => {
                            // console.log(res);
                            if (res.code == 200) {
                                // 添加成功
                                this.$message.success(res.msg)
                                // 关闭弹窗
                                this.cancel();
                                // 重新渲染视图
                                this.getUserList();
                                // 添加成功
                                this.$message.success(res.msg)
                                // 重新获取总条数 
                                this.count();
                            } else {
                                // 添加失败
                                this.$message.error(res.msg)
                            }
                        })
                    } else {
                        // 编辑
                        userEdit(this.userForm).then(res => {
                            if (res.code == 200) {
                                console.log(res);
                                // 编辑成功
                                this.$message.success(res.msg)
                                // 关闭弹窗
                                this.cancel();
                                // 重新渲染视图
                                this.getUserList();
                            }
                        })
                    }

                }
            })


        },
        // 数据回显
        userInfo(uid) {
            // console.log('数据回显', uid);
            userInfo({ uid }).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    // 获取成功
                    // this.$message.success(res.msg);
                    // 渲染视图
                    this.userForm = res.list;
                    this.userForm.uid = uid;
                    // 不修改密码显示空  修改密码直接输入
                    this.userForm.password = '';
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        ...mapActions({
            getUserList: 'user/getUserListAction',
            count:'user/getCountAction'
        })

    },
    mounted() { },
    watch: {},
    computed: {
        ...mapGetters({
            userList: 'user/getUserList'
        })
    },
    filters: {},
    components: {},
}
</script>
<style scoped></style>